<!doctype html>

<html lang="en"xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">
    <title>用户详情</title>
    <!-- Simple bar CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/simplebar.css}">
    <!-- Fonts CSS -->
    <!--    <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">-->
    <!-- Icons CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/feather.css}">
    <!-- Date Range Picker CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/daterangepicker.css}">
    <!-- App CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/app-light.css}" id="lightTheme">
    <link rel="stylesheet" th:href="@{/dash/css/app-dark.css}" id="darkTheme" disabled>
  </head>
  <body class="vertical  light  ">
    <div class="wrapper">
      <nav th:replace="~{comm/blank::topnav}"/>
      <aside th:replace="~{comm/blank::aside}"/>
      <main role="main" class="main-content">
        <div class="container-fluid">
          <div class="row justify-content-center">
            <div class="col-12">
              <form method="post" th:action="@{/user/update}">
              <th:block th:if="${userDetail!=null}">
              <h2 class="page-title">用户详情</h2>
              <p class="text-muted">编辑用户详情后，点击提交按钮以更新用户信息</p>
              <div class="card shadow mb-4">
<!--                <div class="card-header">-->
<!--                  <strong class="card-title">用户详情</strong>-->
                  <img th:src="${userDetail.file}" style="float:right;" class="navbar-brand-img brand-sm mx-auto mb-4" alt="...">
<!--                </div>-->
                <div class="card-body">
<!--                  <div class="row mb-5">-->
<!--&lt;!&ndash;                    <div class="col-12 text-center mb-4">&ndash;&gt;-->
<!--                    <div class="col-12 mb-4">-->
<!--                      -->
<!--                      </div>-->
<!--                  </div>-->
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group mb-3">
                        <label>用户名&nbsp;&nbsp;<span id="un"></span></label>
                        <input name="username" th:value="${userDetail.username}" id="username" type="text" class="form-control" onkeyup="verifyUserName()">
                      </div>
                      <div class="form-group mb-3">
                        <label>密码</label>
                        <input name="password" th:value="${userDetail.password}" type="password" class="form-control">
                      </div>
                      <div class="form-group mb-3">
                        <label>邮箱  &nbsp;&nbsp;<span id="em"></span></label>
                        <input name="email" th:value="${userDetail.email}" id="email" type="text" class="form-control" onkeyup="verifyUserEmail()">
                      </div>
                        <div class="form-group mb-3">
                            <label>电话&nbsp;&nbsp;<span id="ph"></span></label>
                            <input name="phone" th:value="${userDetail.phone}" type="text" class="form-control" id="phone" onkeyup="verifyUserPhone()">
                        </div>
                      <div class="form-group mb-3">
                          <label class="text-dark-dark">性别</label>
                          <select name="gender" class="form-control" id="gender" th:field="${userDetail.gender}">
                              <option value="0">无</option>
                              <option value="1">男</option>
                              <option value="2">女</option>
                          </select>
                      </div>
                      <div class="form-group mb-3">
                        <label>余额</label>
                        <input name="balance" th:value="${userDetail.balance}" type="text" class="form-control input-money">
                      </div>

                    </div> <!-- /.col -->


                    <div class="col-md-6">
                      <div class="form-group mb-3">
                        <label>地址</label>
                        <input name="address" th:value="${userDetail.address}" type="text" class="form-control">
                        <span class="help-block"><small>收件地址</small></span>
                      </div>
                        <!--更新时间不要也行-->
                      <div class="form-group mb-3">
                        <label>更新时间</label>
                        <input name="updatedTime" readonly="readonly" th:value="${#temporals.format(userDetail.updatedTime,'yyyy-MM-dd HH:mm:ss')}" type="text" class="form-control">
                        <span class="help-block"><small>资料最后更新时间</small></span>
                      </div>
                      <div class="form-group mb-3">
                        <label>创建时间</label>
                        <input name="createdTime" readonly="readonly" th:value="${#temporals.format(userDetail.createdTime,'yyyy-MM-dd HH:mm:ss')}" type="text" class="form-control">
                      </div>
                      <div class="form-group mb-3">
                        <label>修改头像链接</label>
                        <input name="file" th:value="${userDetail.file}" type="text" class="form-control">
                      </div>
                      <div class="form-group mb-3">
                        <label>验证状态</label>
<!--                        <span>已验证<input type="radio" name="verified" th:checked="${userDetail.verified=='Y'}" ></span>-->
<!--                        <span>未验证<input type="radio" name="verified" th:checked="${userDetail.verified=='Y'}" ></span>-->
                        <select name="verified" class="form-control" id="status" th:field="${userDetail.verified}">
                          <option value="F">未验证</option>
                          <option value="T">已验证</option>
                        </select>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
              <!-- / .card -->

              <div class="col-md-12 mb-4">
                <div class="card shadow">
                  <div class="card-header">
                    <strong class="card-title">用户描述</strong>
                  </div>
                  <div class="card-body">

                    <div class="form-group mb-3">
                      <label>编辑用户描述信息</label>
                      <textarea name="description" th:text="${userDetail.description}" class="form-control" rows="4"></textarea>
                    </div>
                    <input name="roleId" type="hidden" th:value="${userDetail.roleId}">
                    <input name="id" type="hidden" th:value="${userDetail.id}">
                    <input onclick="window.history.go(-1)" type="button" class="btn btn-warning" value="返回" style="float:left;">
                    <input type="submit" class="btn btn-info" id="submit" value="提交修改" style="float:right;">

                  </div>
                </div>
              </div>

              </th:block>
              </form>
            </div> <!-- .col-12 -->


          </div> <!-- .row -->

        </div> <!-- .container-fluid -->
        <div th:replace="~{comm/blank::modal1}"/>
        <div th:replace="~{comm/blank::modal2}"/>
      </main> <!-- main -->
    </div> <!-- .wrapper -->
    <script th:src="@{/dash/js/jquery.min.js}"></script>
    <script th:src="@{/dash/js/popper.min.js}"></script>
    <script th:src="@{/dash/js/moment.min.js}"></script>
    <script th:src="@{/dash/js/bootstrap.min.js}"></script>
    <script th:src="@{/dash/js/simplebar.min.js}"></script>
    <script th:src="@{/dash/js/daterangepicker.js}"></script>
    <script th:src="@{/dash/js/jquery.stickOnScroll.js}"></script>
    <script th:src="@{/dash/js/tinycolor-min.js}"></script>
    <script th:src="@{/dash/js/config.js}"></script>
    <script th:src="@{/dash/js/apps.js}"></script>
    <script th:src='@{/dash/js/jquery.mask.min.js}'></script>
    <script th:src='@{/dash/js/select2.min.js}'></script>
    <script th:src='@{/dash/js/jquery.steps.min.js}'></script>
    <script th:src='@{/dash/js/jquery.validate.min.js}'></script>
    <script th:src='@{/dash/js/jquery.timepicker.js}'></script>
    <script th:src='@{/dash/js/dropzone.min.js}'></script>
    <script th:src='@{/dash/js/uppy.min.js}'></script>
    <script th:src='@{/dash/js/quill.min.js}'></script>
    <script th:src='@{/js/handle/registerCheck.js}'></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
<!--    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-56159088-1"></script>-->

    <script>

        // $('#submit').click(function () {
        //
        //     const obj = {
        //         "id": 99,
        //         "username": "admin",
        //         "password": "admin",
        //         "phone": "63445453435",
        //         "email": "12341@qq.com",
        //         "createdTime": "2020-11-13 22:47:39",
        //         "updatedTime": "2020-11-24 13:11:11",
        //         "gender": "man",
        //         "address": "Test address3",
        //         "status": "1",
        //         "file": "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1657218806,153508220&fm=26&gp=0.jpg",
        //         "description": "demoDescription",
        //         "balance": "61234.00",
        //         "verified": "T",
        //         "roleId": 1
        //     }
        //
        //     console.log(JSON.stringify(obj))
        //
        //     $.ajax({
        //         //是否异步(执行后面js
        //         async: true,
        //         type: "post",
        //         url: "/user/update",
        //         dataType: "text",
        //         contentType: 'application/json; charset=utf-8',
        //         data: JSON.stringify(obj),
        //         success: function (res) {
        //             console.log(res)
        //             alert("成功");
        //             window.location.href="/user/list"
        //         },
        //         error: function (res) {
        //             console.log(res)
        //             alert("失败");
        //             window.location.href="/fail"
        //         }
        //     });
        // })



      $('.select2').select2(
              {
                theme: 'bootstrap4',
              });
      $('.select2-multi').select2(
              {
                multiple: true,
                theme: 'bootstrap4',
              });
      $('.drgpicker').daterangepicker(
              {
                singleDatePicker: true,
                timePicker: false,
                showDropdowns: true,
                locale:
                        {
                          format: 'MM/DD/YYYY'
                        }
              });
      $('.time-input').timepicker(
              {
                'scrollDefault': 'now',
                'zindex': '9999' /* fix modal open */
              });
      /** date range picker */
      if ($('.datetimes').length)
      {
        $('.datetimes').daterangepicker(
                {
                  timePicker: true,
                  startDate: moment().startOf('hour'),
                  endDate: moment().startOf('hour').add(32, 'hour'),
                  locale:
                          {
                            format: 'M/DD hh:mm A'
                          }
                });
      }
      var start = moment().subtract(29, 'days');
      var end = moment();

      function cb(start, end)
      {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
      }
      $('#reportrange').daterangepicker(
              {
                startDate: start,
                endDate: end,
                ranges:
                        {
                          'Today': [moment(), moment()],
                          'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                          'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                          'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                          'This Month': [moment().startOf('month'), moment().endOf('month')],
                          'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                        }
              }, cb);
      cb(start, end);
      $('.input-placeholder').mask("00/00/0000",
              {
                placeholder: "__/__/____"
              });
      $('.input-zip').mask('00000-000',
              {
                placeholder: "____-___"
              });
      $('.input-money').mask("###0.00",
              {
                reverse: true
              });
      $('.input-phoneus').mask('(000) 000-0000');
      $('.input-mixed').mask('AAA 000-S0S');
      $('.input-ip').mask('0ZZ.0ZZ.0ZZ.0ZZ',
              {
                translation:
                        {
                          'Z':
                                  {
                                    pattern: /[0-9]/,
                                    optional: true
                                  }
                        },
                placeholder: "___.___.___.___"
              });
      // editor
      var editor = document.getElementById('editor');
      if (editor)
      {
        var toolbarOptions = [
          [
            {
              'font': []
            }],
          [
            {
              'header': [1, 2, 3, 4, 5, 6, false]
            }],
          ['bold', 'italic', 'underline', 'strike'],
          ['blockquote', 'code-block'],
          [
            {
              'header': 1
            },
            {
              'header': 2
            }],
          [
            {
              'list': 'ordered'
            },
            {
              'list': 'bullet'
            }],
          [
            {
              'script': 'sub'
            },
            {
              'script': 'super'
            }],
          [
            {
              'indent': '-1'
            },
            {
              'indent': '+1'
            }], // outdent/indent
          [
            {
              'direction': 'rtl'
            }], // text direction
          [
            {
              'color': []
            },
            {
              'background': []
            }], // dropdown with defaults from theme
          [
            {
              'align': []
            }],
          ['clean'] // remove formatting button
        ];
        var quill = new Quill(editor,
                {
                  modules:
                          {
                            toolbar: toolbarOptions
                          },
                  theme: 'snow'
                });
      }
      // Example starter JavaScript for disabling form submissions if there are invalid fields
      (function()
      {
        'use strict';
        window.addEventListener('load', function()
        {
          // Fetch all the forms we want to apply custom Bootstrap validation styles to
          var forms = document.getElementsByClassName('needs-validation');
          // Loop over them and prevent submission
          var validation = Array.prototype.filter.call(forms, function(form)
          {
            form.addEventListener('submit', function(event)
            {
              if (form.checkValidity() === false)
              {
                event.preventDefault();
                event.stopPropagation();
              }
              form.classList.add('was-validated');
            }, false);
          });
        }, false);
      })();
    </script>
    <script>
      var uptarg = document.getElementById('drag-drop-area');
      if (uptarg)
      {
        var uppy = Uppy.Core().use(Uppy.Dashboard,
                {
                  inline: true,
                  target: uptarg,
                  proudlyDisplayPoweredByUppy: false,
                  theme: 'dark',
                  width: 770,
                  height: 210,
                  plugins: ['Webcam']
                }).use(Uppy.Tus,
                {
                  endpoint: 'https://master.tus.io/files/'
                });
        uppy.on('complete', (result) =>
        {
          console.log('Upload complete! We’ve uploaded these files:', result.successful)
        });
      }
    </script>
  </body>
</html>
